---
title: Checkbox
description: A box that is a checked (ticked) indicator when activated.
---

{/* prettier-ignore-start */}
{/* prettier-ignore-end */}

import Code from '@/components/Code.astro';
import { LinkButton } from '@/components/react/LinkButton';
import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
import importedCode from '@rnr/reusables/components/ui/checkbox?raw';

<LinkButton href="https://rn-primitives.vercel.app/checkbox">
  Checkbox Primitive
</LinkButton>
<LinkButton target="_blank" href="https://rnr-showcase.vercel.app/checkbox">
  Demo
</LinkButton>

<br />

A box that is a checked (ticked) indicator when activated.

### Installation
<Tabs>
  <TabItem label='CLI'> 
    ```bash
    npx @react-native-reusables/cli@latest add checkbox
    ```
  </TabItem>
  <TabItem label='Manual'>
    <Aside type="tip" title="Dependency">
        Before copy/pasting, add the <a href="https://rn-primitives.vercel.app/checkbox" className='text-white font-bold'>checkbox primitive</a> to your project.
    </Aside>

    <br />

    **Copy/paste the following code to `~/components/ui/checkbox.tsx`:**


    <Code code={importedCode} lang="tsx" title="~/components/ui/checkbox.tsx" />
  </TabItem>
</Tabs>
### Usage

```tsx
import { Checkbox } from '~/components/ui/checkbox';

function Example() {
  const [checked, setChecked] = React.useState(false); 
  return (
     <Checkbox checked={checked} onCheckedChange={setChecked} />
  );
}
```
## Props

### Checkbox

Extends [`Pressable`](https://reactnative.dev/docs/pressable#props) props

|       Prop        |            Type            |     Note     |
| :---------------: | :------------------------: | :----------: |
|     checked\*     |          boolean           |              |
| onCheckedChange\* | (checked: boolean) => void |              |
|     disabled      |          boolean           | _(optional)_ |